<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../JS/react.development.js"></script>
    <script src="../../JS/react-dom.development.js"></script>
    <script src="../../JS/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        // 通过类的方式定义组件
        class Welcome extends React.Component{
            render() {
                return(
                    <h1>Hello,{this.props.name}</h1>
                );
            }
        }

        // 定义一个大的组件，组合上面的组件
        class WelcomeAll extends React.Component{
            render() {
                return(
                    <div>
                        <Welcome name="Sara" />
                        <Welcome name="Tom" />
                        <Welcome name="Xuan" />
                    </div>
                );
            }
        }

        // 渲染组件
        // this.props = {name.Sara}
        // ReactDOM.render(<Welcome name="Sara" />, document.getElementById('root'));

        // 渲染的大组件
        ReactDOM.render(<WelcomeAll name="Sara" />, document.getElementById('root'));
    </script>
</body>
</html>